<template>
  <div class="table_box">
    <div class="table_header">
      <div class=""> 失败明细</div>
      <!-- <el-button v-if="props.tableData?.length" @click="onExport">导出</el-button> -->
      <el-button v-if="props.tableData?.length" @click="onBatch">批量重发</el-button>
    </div>
    <el-table :data="props.tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="date" label="群信息" width="220">
        <template #default="{ row }">
          <div class="group_item">
            <el-image class="group_item_avatar">
              <template #error>
                <el-icon>
                  <icon-picture />
                </el-icon>
              </template>
            </el-image>
            <div class="group_item_info">
              <el-tooltip effect="dark" :content="row.GroupName" placement="right"
                :disabled="row.GroupName?.length < 9">
                <div class="group_item_name">{{ row.GroupName }}</div>
              </el-tooltip>
              <el-tooltip effect="dark" :content="row.OwnerName" placement="right"
                :disabled="row.OwnerName?.length < 9">
                <div class="group_item_desc">{{ row.OwnerName }}</div>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="群公告" width="300">
        <template #default="{ row }">
          <div class="notice">{{ row.Notice }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="TaskTitle" label="所属任务" min-width="200" />
      <el-table-column prop="SentAt" label="执行时间" min-width="200" />
      <el-table-column prop="ErrMsg" label="失败原因" min-width="200">
        <template #default="{ row }"> {{row.ErrMsg}} </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" fixed="right" width="100">
        <template #default="{row}">
          <el-button v-if="row.ErrMsg == 3" size="small" @click="onAnew">重新发布</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty></el-empty>
      </template>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { exportNoticeError } from '@renderer/ajax/api/dataDashboards'
import { retryGroupChatNotice } from '@renderer/ajax/api/publishGroupNotice'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { defineProps, reactive } from 'vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submit'])
const state = reactive({
  checkedList: []
})
const handleSelectionChange = (val: any) => {
  state.checkedList = val
}
// 重新发布
const onAnew = async (row: any) => {
  await retryGroupChatNotice([row.Id])
  ElMessage.success('重新发布请求成功')
}
// 批量重发
const onBatch = async () => {
  await retryGroupChatNotice(state.checkedList.map((item: any) => item.Id))
  ElMessage.success('批量重新发布请求成功')
  state.checkedList = []
  emit('submit')
}
// 导出明细
const onExport = async () => {
  await exportNoticeError()
  ElMessage.success('导出成功 ')
}
</script>
<style lang="scss" scoped>
.table_box {
  padding: 10px;
  border: 1px solid #dcdfe6;

  .table_header {
    display: flex;
    justify-content: space-between;
  }

  .group_item {
    line-height: 1;
    display: flex;
    padding: 5px;
    border: 1px solid #ebeef5;

    .group_item_avatar {
      min-width: 35px;
      min-height: 35px;
      max-width: 35px;
      max-height: 35px;
      height: 35px;
      font-size: 35px;
      margin-right: 10px;
    }

    .group_item_info {
      max-width: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .group_item_name {
        height: 19px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .group_item_desc {
        font-size: 12px;
        color: #999;
      }

      .group_item_name,
      .group_item_desc {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
  }
}

.notice {
  display: -webkit-box; //谷歌
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; //显示几行
  overflow: hidden;
}
</style>
